<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            margin: 20px;
        }

        .message-box {
            display: flex;

            .content {
                width: 320px;
                height: 45px;
                box-sizing: border-box;
                outline: none;
            }

            .btn {
                width: 80px;
                height: 45px;
            }
        }

        .message-list {
            line-height: 32px;
            font-size: 13px;

            & li {
                margin-top: 10px;
            }
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="message-box">
            <input class="content" type="text"><button class="btn">发送</button>
        </div>
        <ul class="message-list">
            <!-- <li></li> -->
        </ul>
    </div>
</body>
<script>

    var conInp = document.getElementsByClassName("content")[0];
    var btn = document.getElementsByClassName("btn")[0];
    var messageList = document.getElementsByClassName("message-list")[0];


    // 敏感词检测  => 输入的内容中是否存在敏感词
    // 敏感词过滤  => 把输入的敏感词替换为等量的星号


    var keyWordsList = ["菜逼", "废物", "CNM", "NMD", "SB"];

    // 点击发送
    btn.onclick = function () {
        // 输出的内容
        var content = conInp.value;
        content = content.replace(/\s/g, ""); // 

        // 敏感词检测  => 输入的内容中是否存在敏感词

        // 假设法
        // var flag = false;
        // for (var i = 0; i < keyWordsList.length; i++) {
        //     var keyword = keyWordsList[i];

        //     // 此写法无法忽略大小写
        //     // if (content.includes(keyword)) {
        //     //     flag = true;
        //     //     break;
        //     // }

        //     var reg = new RegExp(keyword,"i");
        //     console.log(reg);

        //     if (reg.test(content)) {
        //         flag = true;
        //         break;
        //     }
        // }

        // 正则表达式之间 或的关系
        var keyWordsStr = keyWordsList.join("|");
        var reg = new RegExp(keyWordsStr,"i");
        console.log(reg);
        var flag = reg.test(content);


        if (flag) {
            // 存在敏感词 => 警告
            var li = document.createElement("li");
            li.textContent = "检测到用户的不正当言论,予以警告!";
            li.style.color = "red";
            // messageList.appendChild(li);
            messageList.prepend(li);
            conInp.value = "";
        } else {
            // 直接发送(输出)
            var li = document.createElement("li");
            li.textContent = content;
            // messageList.appendChild(li);
            messageList.prepend(li);
            conInp.value = "";
        }



    }

    // 快捷键发送
    conInp.onkeydown = function (e) {
        var keyCode = e.keyCode;

        if (e.ctrlKey && keyCode == 13) {
            // var content = conInp.value;
            // content = content.replace(/\s/g, "");

            // var li = document.createElement("li");
            // li.textContent = content;
            // // messageList.appendChild(li);
            // messageList.prepend(li);


            // conInp.value = "";

            btn.onclick();
        }
    }


</script>

</html>